<template>
  <div class="login-form">
    <div class="login-form-container">
      <div class="right">
        <!-- <img class="right-pic" src="~images/loginBk.png" alt="" />
        <img class="right-pic1" src="~images/logo2.png" alt=""> -->
      </div>
      <div class="left">
        <div class="left-container">
          <h2 class="title">
            <div>欢迎来到</div>
            <img src="~images/logo3.png" alt="">
          </h2>
          <!-- <div class="find" @click="goPage">
            <p class="find-text">找回密码</p>
            <i class="find-icon iconfont iconjiantou"></i>
          </div> -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="padding-top: 70px"
          >
            <div class="title_s">账号</div>
            <el-form-item label="" prop="username" label-width="0">
              <el-input
                  class="title_s_input"
                v-model="ruleForm.username"
                placeholder="用户名"
              ></el-input>
            </el-form-item>
            <div class="title_s">密码</div>
            <el-form-item label="" prop="password" label-width="0">
              <el-input
                  class="title_s_input"
                v-model="ruleForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
          </el-form>
<!--          <div class="remember" @click="checked = !checked">-->
<!--            <el-checkbox v-model="checked" @click.stop.native></el-checkbox>-->
<!--            <p class="remember-text">记住我</p>-->
<!--          </div>-->
          <el-button class="el-button" type="primary" @click="submitForm"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "@/api/apiBase";
// import menuList from "@/router/menuConfig";
// import IndexMain from "@/components/index/IndexMain";

export default {
  name: "LoginForm",
  data() {
    return {
      checked: false,
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 20, message: "请输入正确的用户名，长度为1-20位", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "请输入正确的密码，长度为6-30位", trigger: "blur" }
        ]
      },
      addKeyNum: false,
    };
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  created() {
    this.addKeyNum = false
    this.init();
  },
  methods: {
    handleKeyDown(event){
      if (event.key === 'Enter') {
        this.addKeyNum = true
        this.submitForm();
      }
    },
    init() {
      let username = this.$ls.get("mujingusername");
      if (username) {
        this.ruleForm.username = username;
        this.checked = true;
      }
    },
    submitForm() {
      this.$ls.remove("mujinguserInfo")
      this.$ls.remove("mujingpermissionList")
      this.$ls.remove("mujingpermissionNameList")
      this.$ls.remove("mujingtoken")
      this.$ls.remove('projectIsStatus')
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        let uuid = this.$ls.get("mujinguuid");
        let deviceId;
        if (uuid) {
          deviceId = uuid;
        } else {
          deviceId = this.handleUUID();
        }
        const params = {
          username: this.ruleForm.username,
          password: this.ruleForm.password,
          deviceId: deviceId,
          deviceType: 2,
        };
        API.login(params).then(res => {
          if (res.key === 1000) {
            res = res.result;
            this.$ls.set("mujinguuid", deviceId);
            this.$ls.set("mujingtoken", res.token);
            this.$ls.set("mujinguserInfo", res.data);
            this.$store.commit("saveToken", res.token);
            this.$store.commit("saveUserInfo", res.data);
            if (this.checked) {
              this.$ls.set("mujingusername", this.ruleForm.username);
            } else {
              let username = this.$ls.get("mujingusername");
              if (username === this.username) {
                this.$ls.remove("mujingusername");
              }
            }
            this.$store.dispatch('initializeSocket');
            this.addKeyNum = true
            if (this.addKeyNum) {
              window.removeEventListener('keydown', this.handleKeyDown);
            }
          }
        });
      });
    },
    handleUUID() {
      return (
        this.S4() +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        "-" +
        this.S4() +
        this.S4() +
        this.S4()
      );
    },
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    },
    goPage() {
      this.$router.push({
        path: "/find"
      });
    }
  }
};
</script>

<style lang="sass">
.title_s_input
  .el-input__inner
    border: none
    background: #F4F6F9
</style>
<style lang="sass" scoped>
.title_s
  font-size: 14px
  font-weight: bold
  color: #222222
  line-height: 19px
  margin-bottom: 11px
.login-form
  flex: 1
  min-height: 600px
  display: flex
  align-items: center
  justify-content: center
  .login-form-container
    width: 100%
    height: 100%
    border-radius: 5px
    background: #fff
    display: flex
    .left
      flex: 1
      display: flex
      align-items: center
      justify-content: center
      background-color: gray
      .left-container
        width: 437px
        .title
          display: flex
          align-items: center
          justify-content: flex-start
          margin-bottom: 28px
          div
            font-size: 26px
            font-weight: bold
            color: #222222
            margin-right: 10px
          img
            width: 128px
            height: 36px
      .find
        display: inline-flex
        align-items: center
        color: #1566e2
        margin-bottom: 24px
        cursor: pointer
        .find-text
          margin-right: 6px
        .find-icon
          font-size: 14px
      ::v-deep .el-input__inner
        height: 52px
      .remember
        display: flex
        align-items: center
        margin-bottom: 30px
        cursor: pointer
        .remember-text
          font-size: 13px
          color: #222
          margin-left: 8px
      .el-button
        width: 111px
        height: 45px
        border-radius: 4px
    .right
      height: 100vh
      position: relative
      .right-pic
        width: 100%
        height: 100%
        position: absolute
        bottom: 0
        border-bottom-right-radius: 5px
      .right-pic1
        width: 215px
        height: 62px
        position: absolute
        left: 50%
        margin-left: -108px
        top: 50%
        margin-top: -31px
</style>
